<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原神</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/Home.css">
    <link rel="stylesheet" type="text/css" href="css/Home_normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/Home_htmleaf-demo.css">
    <!-- <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="css/Home_main.css">
    <link rel="stylesheet" type="text/css" href="css/Home_xuannormalize.css" />
    <link rel="stylesheet" type="text/css" href="css/Home_xuandefault.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style>
        body {
            font-family: 'yahei', sans-serif;
            /*background: #2C3E50;*/
        }

        .muen_list {
            font-size: 0;
            position: relative;
            padding: 0;
            width: 640px;
            /* margin: 40px auto; */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
        }

        .muen_list>li {
            display: inline-block;
            width: 60px;
            height: 60px;
            /* background: #DA4453; */
            font-size: 18px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            text-transform: uppercase;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            font-weight: 400;
            box-sizing: border-box;
        }

        .muen_list .font_style {
            color: orange;
        }

        .muen_list>.slider {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: orange;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }

        /*  Ripple */

        .ripple {
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            position: absolute;
            opacity: 1;
        }

        .rippleEffect {
            -webkit-animation: rippleDrop .6s linear;
            animation: rippleDrop .6s linear;
        }

        @-webkit-keyframes rippleDrop {
            100% {
                -webkit-transform: scale(2);
                transform: scale(2);
                opacity: 0;
            }
        }

        @keyframes rippleDrop {
            100% {
                -webkit-transform: scale(2);
                transform: scale(2);
                opacity: 0;
            }
        }
    </style>
</head>

<body>

    <header class="clearfix">
        <div class="header_left">
            <div class="header_line"></div>
            <div class="header_one">
                <ul>
                    <li class="music">
                        <i class="star"></i>
                        <audio src="./video/BGM.mp3" autoplay controls style="display: none;"></audio>
                    </li>
                    <li>
                        <a href="#"><img src="./images/yuanshen_logo.png" alt=""></a>
                    </li>
                    <li class="as home selecta"><a href="#">首页</a></li>
                    <li class="as news"><a href="#" class="news_a">新闻</a></li>
                    <li class="as Roles"><a href="#">角色</a></li>
                    <li class="as world"><a href="#">世界</a></li>
                    <li class="as manhua"><a href="#">漫画</a></li>
                    <li class="as shequ"><a href="#">社区</a></li>
                </ul>
            </div>
        </div>
        <div class="header_right">
            <span>
                <a href="#" class="User">登&nbsp录</a>
                <img src="" alt="" class="iconfont icon-yonghu">
            </span>
        </div>
    </header>

    <!-- 登录 -->
    <div class="Sing_big clearfix">
        <div class="sign_logo"><img src="./images/MIlogo.png" alt=""></div>
        <div class="Sign clearfix">
            <strong class="close_nav">X</strong>
            <ul>
                <li class="message">短信登录</li>
                <li class="password" style="color: black;">密码登录</li>
            </ul>
            <div class="xian"></div>
            <div class="sign_nav clearfix">
                <div class="message_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号登录/注册">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="text" name="" id="account" class="telephone" maxlength="4" placeholder="验证码">
                    <p id="account_x"></p>
                    <i class="shu">|</i>
                    <input type="button" name="" id="" class="Verification" value="获取验证码">
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
                <div class="password_nav">
                    <input type="text" name="" id="telephone" class="telephone" maxlength="11" placeholder="手机号/邮箱/用户名">
                    <p id="tel_x"></p>
                    <span></span>
                    <input type="password" name="" id="account" class="telephone" maxlength="4" placeholder="密码">
                    <p id="account_x"></p>
                    <button class="login">登 录</button>
                    <a href="#" class="help">登录遇到问题？</a>
                    <a href="#" class="zc">注册</a>
                    <div class="fff">
                        <p>未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守</p>
                        <a href="#">《米哈游通行证用户服务协议》</a>
                        <a href="#">《米哈游通行证用户个人信息及隐私保护政策》</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <nav id="container">
        <video autoplay="autoplay" muted loop>
            <source src="vido/3e78e80.mp4" type="video/mp4">
        </video>
        <div id="foucs">
            <img src="images/player.png" alt="" id="play">
            <a href="#" id="player"></a>
            <ul id="download">
                <li>
                    <a href="#"><img src="images/pc.png" alt=""></a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/ios.png" alt="">
                        <img src="images/and.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/tap.png" alt="">
                        <img src="images/ps4.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/erweima.png" alt="">
                        <span>扫码下载游戏</span>
                    </a>
                </li>

            </ul>
        </div>
        </div>
    </nav>



    <!-- 轮播图板块 -->
    <div class="imp">
        <section>

            <div id="news">
                <span><img src="images/left.png" alt=""></span>
                <h3>新闻资讯</h3>
                <span><img src="images/left.png" alt=""></span>
            </div>
            <div id="list">
                <div class="htmleaf-container">

                    <div class="container">
                        <div class="trent-slider">
                            <div class="t-slide current-t-slide">
                                <img src="images/banner1.jpg" alt="" />
                            </div>
                            <div class="t-slide">
                                <img src="images/banner2.jpg" alt="" />
                            </div>
                            <div class="t-slide">
                                <img src="images/banner3.jpg" alt="" />
                            </div>
                            <div class="t-slide">
                                <img src="images/banner4.jpg" alt="" />
                            </div>
                            <div class="t-slider-controls">
                                <div class="arrow right-arrow">
                                    <div class="arrow-container">
                                        <div class="arrow-icon"><i class="fa fa-chevron-right" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="arrow left-arrow">
                                    <div class="arrow-container">
                                        <div class="arrow-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="t-load-bar">
                                    <div class="inner-load-bar"></div>
                                </div>
                                <div class="t-dots-container">
                                    <div class="t-slide-dots-wrap">
                                        <div class="t-slide-dots">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 选项卡 -->
                <div id="con">



                    <div class="muen">
                        <ul class="muen_list">
                            <li class="new font_style">最新 </li>
                            <li class="news">新闻 </li>
                            <li>公告</li>
                            <li>活动</li>
                            <li class="slider"></li>
                        </ul>
                        <div class="muen_content">
                            <ul class=" new_banner">
                                <li>
                                    <a href="#">
                                        <p>《原神》「启程测试」充值返还规则说明</p>
                                        <p>2020/09/15</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        <p>「原素烘炉」多人游戏挑战活动玩法说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        <p>《原神》App Store Today 推荐 - 「技术宅拯救世界！」</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <p>10月11日原素烘炉活动说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <p>《原神》近期游戏内描述等问题修复调整说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>

                            </ul>
                            <ul class="hide  new_banner">
                                <li>
                                    <a href="#">
                                        <p>《原神》可莉角色PV-「太阳逃跑的夜晚」</p>
                                        <p>2020/09/15</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        <p>「原素烘炉」多人游戏挑战活动玩法说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        <p>《原神》App Store Today 推荐 - 「技术宅拯救世界！」</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <p>10月11日原素烘炉活动说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <p>《原神》近期游戏内描述等问题修复调整说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>

                            </ul>
                            <ul class="hide new_banner">
                                <li>
                                    <a href="#">
                                        <p>《原神》「启程测试」充值返还规则说明</p>
                                        <p>2020/09/15</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        <p>后续版本活动规划说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        <p>关于节日活动相关问题说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <p>关于剪切板调用问题修复说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <p>关于Anti-Cheat反外挂程序问题的修复声明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>

                            </ul>
                            <ul class="hide new_banner">
                                <li>
                                    <a href="#">
                                        <p>《原神》「启程测试」充值返还规则说明</p>
                                        <p>2020/09/15</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        <p>「原素烘炉」多人游戏挑战活动玩法说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        <p>《原神》App Store Today 推荐 - 「技术宅拯救世界！」</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <p>10月11日原素烘炉活动说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <p>《原神》近期游戏内描述等问题修复调整说明</p>
                                        <p>2020/10/11</p>
                                    </a>
                                </li>

                            </ul>

                        </div>
                        <div class="last">
                            <a href="#">
                                <span><img src="images/more.png" alt=""></span> 查看全部资讯
                            </a>
                        </div>
                    </div>


                </div>
            </div>

        </section>
    </div>
    <div class="wrap">
        <ul>
            <li class="wrap_mengde">
                <a href="#" class="wrap_city ">蒙德城</a>

            </li>
            <li class="wrap_liuli">
                <a href="#" class="wrap_city "> 璃月港</a>

            </li>
            <li><a href="#">敬请期待</a></li>
        </ul>
    </div>


    <!-- footer -->
    <footer class="footer">
        <ul class="footer_socialbar">
            <li class="footer_item weibo"></li>
            <li class="footer_item qq"></li>
            <li class="footer_item weixin"></li>
            <li class="footer_item share">
            </li>
        </ul>
        <div class="share_wrap">
            <p>分享至</p>
            <ul style="margin-left: 34px;">
                <li style="background-position: -74px -74px;"></li>
                <li style="background-position: -74px -10px;"></li>
                <li style="background-position: -138px -138px;"></li>
                <li style="background-position: -10px -138px;"></li>
            </ul>
        </div>
        <div id="footer_top">
            <div>
                <div class="mihoyo-cn-footer mihoyo-cn-footer-ys-mihoyo">
                    <div class="footer_content">
                        <div class="footer_logo">
                            <ul>
                                <li>
                                    <div style="display: flex; align-items: center;">
                                        <img src="./images/footer-mihoyo.png" style="width: auto;height: 42px;">
                                        <span></span>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <img src="./images/footer-logo.png" style="width: 110px;height: auto;">
                                    </div>
                                </li>
                            </ul>


                        </div>
                        <div class="footer_info">
                            <div class="footer_link">
                                <div class="footer_protocol">
                                    <div>
                                        <a href="https://ys.mihoyo.com/company/agreement" class="protocol"
                                            target="_blank">用户协议</a>
                                        |
                                        <a href="https://ys.mihoyo.com/company/privacy" class="protocol"
                                            target="_blank">隐私政策</a>
                                        |
                                        <a href="https://jiazhang.mihoyo.com/#/" class="protocol"
                                            target="_blank">家长监护工程</a>
                                        |
                                        <a href="http://www.mihayou.com/company.html" target="_blank"
                                            class="about-us protocol">关于我们</a>
                                        |
                                        <a href="http://www.mihayou.com/contact.html" target="_blank"
                                            class="contract-us protocol">联系我们</a>
                                        |
                                        <a href="http://www.mihayou.com/add.html" target="_blank"
                                            class="join-us protocol">加入我们</a>

                                    </div>
                                </div>

                            </div>

                            <div class="footer_advice">
                                <p class="advice_info">
                                    健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
                                </p>
                                <div class="inline_info">
                                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402001113"
                                        class="footer-filing-item" target="_blank">沪公网安备31010402001113号</a>
                                    <span class="split_line"> | </span>
                                    <span class="footer_filing_item">增值电信业务经营许可证：沪B2-20190555</span>
                                </div>

                            </div>

                            <div class="footer_filing">
                                <div class="footer_filing_content">
                                    <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
                                        class="footer-filing-item">沪ICP备19018275号-4</a>
                                    <span class="split_line"> | </span>
                                    <span> 沪网文〔2019〕3168-216号 </span>
                                    <span class="split_line"> | </span>
                                    <span>国新出审【2019】2978号</span>
                                </div>
                                <div class="footer_filing_tip">
                                    <span>互联网违法不良信息举报邮箱: tousu@mihoyo.com </span>
                                    <span>互联网违法不良信息举报电话: 021-34203135 （工作时间：每天10点 - 20点）</span>
                                </div>
                            </div>

                            <div class="footer-tip">
                                亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。
                            </div>

                            <div class="mihoyo-copyright">©2012-2020 上海米哈游影铁科技有限公司版权所有</div>

                            <div class="footer_icon">
                                <a href="https://v.yunaq.com/certificate?domain=www.mihoyo.com&amp;from=label&amp;code=90020"
                                    target="_blank"><img src="./images/footer-icon1.png" alt=""></a>
                                <a href="http://www.shjbzx.cn/" target="_blank"><img src="./images/footer-icon2.png"
                                        alt=""></a>
                                <a href="https://www.12377.cn/" target="_blank"><img src="./images/footer-icon3.png"
                                        alt=""></a>
                                <a href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/8955A9DDE1FF8B6CE053010A14ACA87F"
                                    target="_blank"><img src="./images/footer-icon4.png" alt=""></a>
                                <a href="#" target="_blank"><img src="./images/footer-icon5.png" alt=""></a>
                                <a href="http://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020190314100540000004452331-SAIC_SHOW_310000-20200120150237277642&signData=MEYCIQCjn9IhIKfUHjPlx9W6xrYPZ4GA73Blopwp0iEzSX0OHQIhAOZm3tnlWLrgVXMtvgp5OibauIgiAa+2d+MQ7qzMIm6t"
                                    target="_blank"><img src="./images/footer-icon6.png" alt=""></a>

                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

    </footer>



    <div class="S_fixedtool">
        <ul>
            <li>关注我们</li>
            <li class="current">
                <img src="images/wechart.png" alt="">
                <p>扫码关注微信</p>
            </li>
            <li><a href="#" class=" icon-weibo">官方微博</a></li>
            <li class="louti"><a href="#" class="iconfont icon-taptap">TapTap</a></li>
            <li class="louti"><a href="#" class="icon-miyoushe">官方社区</a></li>
        </ul>
    </div>











    <!-- 轮播图js -->
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script>
        window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
    </script>
    <script src="js/Home.js"></script>




    <!-- 选项卡js -->
    <!-- <script src="jquery-1.11.0.min.js"></script> -->
    <script>
        $(function () {
            $('.share_wrap').mouseover(function () {
                $('.share_wrap').show()
            }).mouseout(function () {
                $('.share_wrap').hide()
            })

            $('.share').mouseover(function () {
                $('.share_wrap').fadeIn()
            }).mouseout(function () {
                var flag = $('.share_wrap').show()
                if (!flag) {
                    $('.share_wrap').hide()
                }
            })

            $(".news").click(function () {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function () {
                    window.location.href = "News.html";
                }, 5000)
            })


            $(".Roles").click(function () {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function () {
                    window.location.href = "Role.html";
                }, 5000)
            })


            $(".world").click(function () {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function () {
                    window.location.href = "World.html";
                }, 5000)
            })

            $(".manhua").click(function () {
                $("body").children().eq(0).append(`<div class="loading"></div>`)
                setTimeout(function () {
                    window.location.href = "manga_index.html.html";
                }, 5000)
            })
            var ul = document.querySelectorAll(".new_banner")
            // $(".muen_list li").on("click",function(){

            // })



            $(".muen_list li").click(function (e) {

                var index = $(this).index()
                // console.log(index);

                $(ul).eq(index).removeClass("hide").siblings().addClass("hide")
                console.log(ul, index)


                $(this).addClass("font_style").siblings().removeClass("font_style")
                // make sure we cannot click the slider
                if ($(this).hasClass('slider')) {
                    return;
                }

                /* Add the slider movement */

                // what tab was pressed
                var whatTab = $(this).index();

                // Work out how far the slider needs to go
                var howFar = 60 * whatTab;

                $(".slider").css({
                    left: howFar + "px"
                });

                /* Add the ripple */

                // Remove olds ones
                $(".ripple").remove();

                // Setup
                var posX = $(this).offset().left,
                    posY = $(this).offset().top,
                    buttonWidth = $(this).width(),
                    buttonHeight = $(this).height();

                // Add the element
                $(this).prepend("<span class='ripple'></span>");

                // Make it round!
                if (buttonWidth >= buttonHeight) {
                    buttonHeight = buttonWidth;
                } else {
                    buttonWidth = buttonHeight;
                }

                // Get the center of the element
                var x = e.pageX - posX - buttonWidth / 2;
                var y = e.pageY - posY - buttonHeight / 2;

                // Add the ripples CSS and start the animation
                $(".ripple").css({
                    width: buttonWidth,
                    height: buttonHeight,
                    top: y + 'px',
                    left: x + 'px'
                }).addClass("rippleEffect");
            });
            // 第二块轮播图选项卡结束

            $(".wrap ul li").on("mouseover", function () {
                // .parentsNode("li").siblings().childrenNode("a").addClass("wrap_city")
                $(this).children().removeClass("wrap_city")
                var index = $(this).index()
                if (index == 0) {
                    $(this).children().addClass("wrap_rimg")
                } else if (index == 1) {
                    $(this).children().addClass("wrap_reimg")
                }
                //    console.log( $(this))

            })
            $(".wrap ul li").on("mouseout", function () {
                // .parentsNode("li").siblings().childrenNode("a").addClass("wrap_city")
                $(this).children().addClass("wrap_city")
                var index = $(this).index()
                if (index == 0) {
                    $(this).children().removeClass("wrap_rimg")
                } else if (index == 1) {
                    $(this).children().removeClass("wrap_reimg")
                }
                //    console.log( $(this))

            })





            var S_twoTop = $('.imp').offset().top;
            console.log(S_twoTop);

            $(window).scroll(function () {
                var dTop = $(document).scrollTop();


                if (dTop >= S_twoTop) {
                    $('.S_fixedtool').fadeIn(500);

                } else {
                    $('.S_fixedtool').fadeOut(500);
                }
            })

            $(".news").mousemove(function () {
                $(".header_line ").css("left", "545px")
            })

            $(".news").mouseout(function () {
                $(".header_line ").css("left", "460px")
            })

            $(".news").mousemove(function () {
                $(".header_line ").css("left", "545px")
            })

            $(".news").mouseout(function () {
                $(".header_line ").css("left", "460px")
            })


            $(".Roles").mousemove(function () {
                $(".header_line ").css("left", "630px")
            })

            $(".Roles").mouseout(function () {
                $(".header_line ").css("left", "460px")
            })


            $(".world").mousemove(function () {
                $(".header_line ").css("left", "715px")
            })

            $(".world").mouseout(function () {
                $(".header_line ").css("left", "460px")
            })


            $(".manhua").mousemove(function () {
                $(".header_line ").css("left", "802px")
            })

            $(".manhua").mouseout(function () {
                $(".header_line ").css("left", "460px")
            })

            $(".shequ").mousemove(function () {
                $(".header_line ").css("left", "888px")
            })

            $(".shequ").mouseout(function () {
                $(".header_line ").css("left", "460px")
            })


            // var music = document.querySelector("audio");
            // $(document).ready(function() {
            //     music.play();
            // })

            // $(".music").click(function() {
            //     $(".music>i").toggleClass("stop");
            //     if (music.paused) {
            //         music.play();

            //     } else {
            //         music.pause();
            //     }
            // })


            //登录触动变色
            $(".header_right span").mousemove(function () {
                $(".User").css("color", "white")
                $(".iconfont .icon-yonghu").css("color", "red")
            })

            $(".header_right span").mouseleave(function () {
                $(".User").css("color", "#ccc")
                $(".iconfont .icon-yonghu").css("color", "red")
            })


            // 线条移动
            $(".message").click(function () {
                $(".xian").css("left", "120px")
                $(".message_nav").show();
                $(".password_nav").hide();
                $(".message").css("color", " #ce965f")
                $(".password").css("color", "black")
            })

            $(".password").click(function () {
                $(".xian").css("left", "305px")
                $(".password_nav").show();
                $(".message_nav").hide();
                $(".password").css("color", " #ce965f")
                $(".message").css("color", "black")
            })


            //正则验证
            function phoneverification() {
                var phone = document.getElementById('telephone').value;
                if (!(/^1[34578]\d{9}$/.test(phone))) {
                    $("#telephone").css("color", "red")
                    $(".message_nav>span").text("*手机格式错误");
                    return false
                } else {
                    $("#telephone").css("color", "black")
                    $(".message_nav>span").text("");
                    return false
                }

                if (phone == "") {
                    $(".message_nav>span").text("*手机号不能为空");
                    return false
                }
            }

            // 输入框点击时动画
            $("#telephone").focus(function () {
                $("#tel_x").css("width", "296px");
                $("#account_x").css("width", "0px");
                var phone = document.getElementById('telephone').value;

                phoneverification();

            })

            // 输入框点击时动画
            $("#account").focus(function () {
                $("#tel_x").css("width", "0px");
                Verification
                $("#account_x").css("width", "296px");
                var phone = document.getElementById('telephone').value;

                phoneverification();
            })


            //登录按钮
            $(".login").click(function () {
                phoneverification();
            })

            //获取验证码
            var count = 60;
            $(".Verification").click(function () {
                //正则验证
                var phone = document.getElementById('telephone').value;
                if (!(/^1[34578]\d{9}$/.test(phone))) {
                    $("#telephone").css("color", "red")
                    $(".message_nav>span").text("*手机格式错误");
                    return false
                } else {
                    $("#telephone").css("color", "black")
                    $(".message_nav>span").text("");
                }

                if (phone == "") {
                    $(".message_nav>span").text("*手机号不能为空");
                    return false
                }

                //倒计时
                $(".Verification").attr("disabled", "disabled"); //点击一次不可再点
                var interval = setInterval(function () { //定义定时器
                    $(".Verification").val("已发送" + "(" + count + ")");
                    count--;
                    if (count == 0) {
                        clearInterval(interval); //清除定时器
                        $(".Verification").val("重新获取验证码");
                        $(".Verification").removeAttr("disabled"); //删除这个属性
                        count = 60;
                    }
                }, 1000);
            })


            $(".User").click(function () {
                $(".Sing_big ").show();
            })
            $(".close_nav").click(function () {
                $(".Sing_big").hide();
            })
        })
    </script>
</body>

</html>